<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>shadow</title>
<style type="text/css">
div{
	width: 300px;
	height:100px;
	padding: 10px;
	margin: 30px;
	border : 1px solid black;
}
#test1{
	box-shadow: 30px 10px gray; /* 가로오프셋 세로오프셋  blur 두께 색상*/
}
#test2{
	box-shadow: 10px 10px 20px gray;
}
.rounded{
	background-color: #669900;
	border : 2px solid #669900;
	border-radius : 20px;
	color: white;
	width: 250px;
	text-align: center;
	padding: 5px;
	height: 25px;
}

</style>
</head>
<body>
	<div id="test1">10px 10px gray</div>
	<div id="test2">10px 10px 20px gray</div>
	<div class="rounded">동그란 보더입니다.</div>	
</body>
</html>